<template>
  <div>
    <Form :inline="true" :model="form" :label-width="40">

      <FormItem label="层数">
        <Input v-model="form.ceng"></Input>
      </FormItem>

      <FormItem label="户数">
        <Input v-model="form.hu"></Input>
      </FormItem>

      <Button class="ml10" @click="create">生成楼层</Button>
      <Button class="ml10" @click="clear">清空楼层</Button>
      <Button class="ml10" @click="save">保存数据</Button>
    </Form>

    <div v-for="(item, index) in floordata" :key="'a' + index" class="mt10">

      <Row>
        <Input v-if="editCeng === index " style="width:60px" size="small"
               v-model="currentCeng"></Input>
        <div v-else style="width:60px;" class="fl text-center">{{item.title}}</div>
        <template v-if="editCeng === index">
          <Button size="small" class="ml10" @click="saveCeng(index)">保存</Button>
          <Button size="small" class="ml10" @click="cancelCeng(index)">取消</Button>
        </template>
        <Button v-else size="small" class="ml10" @click="updateCeng(index)">修改层名称</Button>
        <Button size="small" class="ml10" @click="insertCeng(index)">插入一层</Button>
        <Button size="small" class="ml10" @click="removeCeng(index)">删除该层</Button>
        <Button size="small" class="ml10" @click="insertHu(index)">添加一户</Button>
      </Row>

      <Row class="mt10">
        <div style="width:250px; height:30px;" v-for="(item1, index1) in item.list" :key="'b' + index1"
             class="ml10 mt5 fl text-center pointer">
          <template v-if="edit.i === index && edit.j === index1">
            <Input class="hu_input" v-model="current"/>
            <Button class="btn" slot="append" icon="ios-checkmark" @click="ok(index, index1, item1)"></Button>
            <Button class="btn" slot="append" icon="ios-close" @click="close"></Button>
            <Button class="btn" slot="append" icon="ios-trash-outline" @click="del(index, index1, item1)"></Button>
          </template>
          <div v-else @click="clickhu(index, index1, item1)" style="padding-top:6px;">{{item1.title}}</div>
        </div>
      </Row>

    </div>

  </div>
</template>

<script>

export default {

  name: 'unit',

  data () {
    return {
      editCeng: -1,
      currentCeng: '',
      edit: {
        i: -1,
        j: -1
      },
      current: '',
      form: {
        ceng: 1,
        hu: 1
      },
      floordata: this.fdata
    }
  },
  props: {
    unit: {
      type: String,
      default: '1'
    },
    fdata: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  components: {},
  computed: {},
  methods: {
    create () {
      this.floordata = []
      for (let i = 0; i < this.form.ceng; i++) {
        let obj = {
          title: (i + 1) + 'F',
          list: []
        }
        for (let j = 0; j < this.form.hu; j++) {
          obj.list.push({
            title: this.unit + '-' + (i + 1) + '-' + (j + 1)
          })
        }
        this.floordata.push(obj)
      }
    },
    clickhu (i, j, item) {
      // console.log(i)
      // console.log(j)
      // console.log(item)
      this.edit.i = i
      this.edit.j = j
      this.current = item.title
    },
    clear () {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确认清空此单元内所有数据么？</p >',
        onOk: () => {
          this.edit.i = -1
          this.edit.j = -1
          this.current = ''
          this.floordata = []
          this.$Message.success('删除成功')
        },
        onCancel: () => {
          this.$Message.info('操作已取消')
        }
      })
    },
    ok (i, j, item) {
      // console.log('点击确认时当前current值为', this.current)
      this.floordata[i].list[j].title = this.current
      this.edit.i = -1
      this.edit.j = -1
      this.current = ''
    },
    del (i, j) {
      // console.log(i)
      // console.log(j)
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除此户么？',
        onOk: () => {
          this.floordata[i].list.splice(j, 1)
          this.edit.i = -1
          this.edit.j = -1
          this.current = ''
        },
        onCancel: () => {
        }
      })
    },
    close () {
      // console.log('close')
      this.edit.i = -1
      this.edit.j = -1
      this.current = ''
    },
    save () {
      // console.log(this.floordata)
      this.$emit('save', this.floordata)
    },
    // 修改层
    updateCeng (i) {
      this.editCeng = i
      this.currentCeng = this.floordata[i].title
    },
    // 插入层
    insertCeng (i) {
      // console.log('当前层数', i)
      // console.log(this.floordata[i].id)
      let newCeng = {
        id: parseInt(this.floordata[i].id) + 1,
        level: '103',
        list: [],
        pid: this.floordata[i].pid,
        title: (i + 2) + 'F'
      }
      let arr = this.floordata.slice(i + 1)
      arr.forEach((ceng) => {
        // console.log(ceng.title)
        let num = ceng.title.split('')
        let newNum = (parseInt(num[0]) + 1) + 'F'
        ceng.title = newNum
        ceng.list.forEach((Hu) => {
          // console.log(Hu.title)
          let HuNum = Hu.title.split('-')
          let newHuNum = HuNum[0] + '-' + (parseInt(HuNum[1]) + 1) + '-' + HuNum[2]
          Hu.title = newHuNum
        })
      })
      // console.log('截取部分', arr)
      // console.log(newCeng)
      this.floordata.splice(i + 1, 0, newCeng)
      // console.log('当前数据', this.floordata)
    },
    // 删除层
    removeCeng (i) {
      // console.log('当前层数', i)
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除此层么？',
        onOk: () => {
          if (i > -1) {
            this.floordata.splice(i, 1)
            let arr = this.floordata.slice(i)
            // console.log('新数组', arr)
            arr.forEach((item) => {
              // console.log(item.title)
              let num = item.title.split('')
              let newNum = (parseInt(num[0]) - 1) + 'F'
              // console.log('--', newNum)
              item.title = newNum
              // console.log('修改后', item.title)
              item.list.forEach((Hu) => {
                // console.log(Hu.title)
                let HuNum = Hu.title.split('-')
                let newHuNum = HuNum[0] + '-' + (parseInt(HuNum[1]) - 1) + '-' + HuNum[2]
                // console.log('新户名', newHuNum)
                Hu.title = newHuNum
              })
            })
            this.floordata.splice(i)
            arr.forEach((item) => {
              this.floordata.push(item)
            })
          }
          // console.log('修改后数组', this.floordata)
        },
        onCancel: () => {
        }
      })
    },
    // 插入户
    insertHu (i) {
      // console.log('当前层序号', i)
      // console.log('当前数据', this.floordata[i])
      if (i > -1) {
        let huList = this.floordata[i].list
        let huTitle = ''
        if (this.floordata[i].list.length === 0) {
          huTitle = this.unit + '-' + (i + 1) + '-' + '1'
        } else {
          let huTitle2 = this.floordata[i].list[huList.length - 1].title
          let newTitle = huTitle2.split('-')
          huTitle = this.unit + '-' + (i + 1) + '-' + (parseInt(newTitle[2]) + 1)
        }
        // console.log('新加的户title', huTitle)
        let newHu = {
          id: this.floordata[i].id + '01',
          level: '104',
          pid: this.floordata[i].id,
          title: huTitle
        }
        this.floordata[i].list.push(newHu)
      }
    },
    // 保存层
    saveCeng (i, title) {
      this.floordata[i].title = this.currentCeng
      this.editCeng = -1
      this.currentCeng = ''
    },
    // 取消层
    cancelCeng () {
      this.editCeng = -1
      this.currentCeng = ''
    }
  },
  watch: {},
  mounted () {

  }

}
</script>

<style scoped>
  .ml10 {
    margin-left: 10px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .fl {
    float: left;
  }

  .text-center {
    text-align: center;
  }

  .mt5 {
    margin-top: 5px;
  }

  .pointer {
    cursor: pointer;
  }

  .btn {
    display: inline-block;
  }

  .hu_input {
    width: 80px;
  }
</style>
